<template>
	<view class="importType">
		<HeaderBar title="导入方式" showBack backgroundColor="#F6F6F6" fixed />
		<view class="contentBox">
			<view class="group">
				<view class="cell" @tap="importWallet(1)">
					<view class="icon_box">
						<image src="/static/images/login/import1.png" mode="widthFix" class="icon"></image>
					</view>
					<view class="c_right border-bottom">
						<view class="centent">
							<view class="title">
								助记词导入
							</view>
							<view class="subtitle">
								通过输入助记词或扫描二维码进行导入
							</view>
						</view>
						<view class="right_icon">
							<image src="/static/images/login/right.png" mode="widthFix" class="icon"></image>
						</view>
					</view>
				</view>
				<view class="cell" @tap="importWallet(3)">
					<view class="icon_box">
						<image src="/static/images/login/import2.png" mode="widthFix" class="icon"></image>
					</view>
					<view class="c_right ">
						<view class="centent">
							<view class="title">
								私钥导入
							</view>
							<view class="subtitle">
								通过输入明文私钥或扫二维码进行导入
							</view>
						</view>
						<view class="right_icon">
							<image src="/static/images/login/right.png" mode="widthFix" class="icon"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="group mt4">
				<!-- <view class="cell">
					<view class="icon_box">
						<image src="/static/images/login/import3.png" mode="widthFix" class="icon"></image>
					</view>
					<view class="c_right border-bottom">
						<view class="centent">
							<view class="title">
								冷钱包
							</view>
							<view class="subtitle">
								离线导入并保持与网络隔绝，确保私钥永不触网
							</view>
						</view>
						<view class="right_icon">
							<image src="/static/images/login/right.png" mode="widthFix" class="icon"></image>
						</view>
					</view>
				</view> -->
				<view class="cell" @tap="importWallet(4)" v-if="address">
					<view class="icon_box">
						<image src="/static/images/login/import4.png" mode="widthFix" class="icon"></image>
					</view>
					<view class="c_right ">
						<view class="centent">
							<view class="title">
								观察钱包
							</view>
							<view class="subtitle">
								无需导入私钥，输入账号或者对应公钥即可导入
							</view>
						</view>
						<view class="right_icon">
							<image src="/static/images/login/right.png" mode="widthFix" class="icon"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {}
			};
		},
		computed: {
			address() {
				return this.$store.getters.getAddress;
			},
		},
		onLoad(options) {
			const configStr = options.configStr || '';
			try {
				// 解码并反序列化 JSON 字符串
				const config = JSON.parse(decodeURIComponent(configStr));
				this.config = config
			} catch (error) {}
		},
		methods: {
			importWallet(active) {
				this.config.importMethod = active;
				const configStr = encodeURIComponent(JSON.stringify(this.config));
				if (active == 4) {
					uni.navigateTo({
						url: `/pages/Observewallet/Observewallet?&configStr=${configStr}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/importWallet/importWallet?&configStr=${configStr}`
					})
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.importType {
		height: 100vh;
		background: #F6F6F6;

		.contentBox {
			padding: 40upx 32upx;

			.mt4 {
				margin-top: 40upx;
			}

			.group {
				background: #FFF;
				border-radius: 20upx;

				.cell {
					display: flex;
					padding-left: 28upx;
					height: 160upx;
					align-items: center;

					.icon_box {
						display: flex;

						.icon {
							width: 68upx;
							height: 68upx;
						}
					}

					.border-bottom {
						border-bottom: 1upx solid #D8D8D8;
					}

					.c_right {
						margin-left: 14upx;
						padding-right: 50upx;
						flex: 1;
						align-items: center;
						display: flex;
						justify-content: space-between;
						height: 160upx;
						align-items: center;

						.centent {
							.title {
								color: #3D3D3D;
								font-size: 30upx;
								font-weight: 400;
							}

							.subtitle {
								color: #B2B2B2;
								font-size: 26upx;
								font-weight: 400;
								margin-top: 7upx;
							}
						}

						.right_icon {
							display: flex;

							.icon {
								width: 20upx;
								height: 20upx;
							}
						}
					}
				}
			}
		}
	}
</style>